<template>
  <div class='control-box'>
    <div>
      <div class='click-btn' @click='removeOverlay("point")'>删除点</div>
      <div class='click-btn' @click='removeOverlay("polyline")'>删除线</div>
      <div class='click-btn' @click='removeOverlay("billboard")'>删除图片</div>
      <div class='click-btn' @click='removeOverlay("polygon")'>删除多边形</div>
      <div class='click-btn' @click='removeOverlay("circle")'>删除圆</div>
      <div class='click-btn' @click='removeOverlay("rect")'>删除矩形</div>
      <div class='click-btn' @click='removeOverlay("ellipse")'>删除椭圆</div>
      <div class='click-btn' @click='removeOverlay("arch")'>删除弓形</div>
      <div class='click-btn' @click='removeOverlay("sector")'>删除饼图</div>
      <div class='click-btn' @click='removeOverlay("dot_symbol")'>删除点军标</div>
    </div>
    <div>
      <div class='click-btn' @click='changeOverlay("point")'>修改点</div>
      <div class='click-btn' @click='changeOverlay("polyline")'>修改线</div>
      <div class='click-btn' @click='changeOverlay("billboard")'>修改图片</div>
      <div class='click-btn' @click='changeOverlay("polygon")'>修改多边形</div>
      <div class='click-btn' @click='changeOverlay("circle")'>修改圆</div>
      <div class='click-btn' @click='changeOverlay("rect")'>修改矩形</div>
      <div class='click-btn' @click='changeOverlay("ellipse")'>修改椭圆</div>
      <div class='click-btn' @click='changeOverlay("arch")'>修改弓形</div>
      <div class='click-btn' @click='changeOverlay("sector")'>修改饼图</div>
      <div class='click-btn' @click='changeOverlay("dot_symbol")'>修改点军标</div>
    </div>
    <div>
      <div class='click-btn' @click='addOverlay("point")'>加点</div>
      <div class='click-btn' @click='addOverlay("polyline")'>加线</div>
      <div class='click-btn' @click='addOverlay("billboard")'>加图片</div>
      <div class='click-btn' @click='addOverlay("polygon")'>加多边形</div>
      <div class='click-btn' @click='addOverlay("circle")'>加圆</div>
      <div class='click-btn' @click='addOverlay("rect")'>加矩形</div>
      <div class='click-btn' @click='addOverlay("ellipse")'>加椭圆</div>
      <div class='click-btn' @click='addOverlay("arch")'>加弓形</div>
      <div class='click-btn' @click='addOverlay("sector")'>加饼图</div>
      <div class='click-btn' @click='addOverlay("dot_symbol")'>加点军标</div>
    </div>
    <div>
      <div class='click-btn' @click='drawOverlay("point")'>绘制点</div>
      <div class='click-btn' @click='drawOverlay("polyline")'>绘制多段线</div>
      <div class='click-btn' @click='drawOverlay("polygon")'>绘制多边形</div>
      <div class='click-btn' @click='drawOverlay("circle")'>绘制圆</div>
      <div class='click-btn' @click='drawOverlay("sector")'>绘制扇形</div>
      <div class='click-btn' @click='drawOverlay("rect")'>绘制矩形</div>
      <div class='click-btn' @click='drawOverlay("arch")'>绘制弓形</div>
      <div class='click-btn' @click='drawOverlay("curve_polygon")'>绘制任意曲面</div>
    </div>
    <div>
      <div class='click-btn' @click='clear()'>清空场景</div>
      <div class='click-btn' @click='exportScene()'>导出场景</div>
      <div class='click-btn' @click='importScene()'>导入场景</div>
    </div>
    <div>
      <div class='click-btn' @click='bindGlobalClickEvent()'>绑定全局点击事件</div>
      <div class='click-btn' @click='unbindGlobalClickEvent()'>取消全局点击事件</div>
    </div>
  </div>
</template>

<script>
const layerId = 'graphicLayer'
/**
 * 图元的配置参数
 * @type {{point: {layerId: string, options: {callback: overlayDict.point.options.callback, geometry: {lng: number, alt: number, lat: number}, style: {color: string}}, id: string}}}
 */
const overlayDict = {
  point: {
    layerId,
    id: 'iPoint',
    options: {
      geometry: { lng: 115, lat: 35, alt: 0.0 },
      style: {
        color: 'red'
      },
      label: { //文本配置
        text: '我是点', // 文本信息
        textStyle: {
          pixelOffsetX: 0,
          pixelOffsetY: -20,
          fillColor: 'black'
        }
      },
      callback: point => {
        console.log(point)
      }
    }
  },
  polyline: {
    layerId,
    id: MapInstance.Util.uuid(),
    options: {
      geometry: [{ lng: 115, lat: 35, alt: 0.0 }, { lng: 125, lat: 25, alt: 0.0 }, { lng: 135, lat: 35, alt: 0.0 }],
      style: {
        width: 10,
        materialType: MapInstance.MATERIAL_TYPE.PolylineArrow, //箭头线
        materialOptions: {
          color: 'red'
        }
      },
      callback: polyline => {
        console.log(polyline)
      }
    }
  },
  billboard: {
    layerId,
    id: MapInstance.Util.uuid(),
    options: {
      geometry: { lng: 100, lat: 30 },
      style: {
        image: './img/satellite.png'
      },
      callback: billboard => {
        console.log(billboard)
      }
    }
  },
  polygon: {
    layerId,
    id: MapInstance.Util.uuid(),
    options: {
      geometry: [{ lng: 110, lat: 30, alt: 0.0 }, { lng: 120, lat: 25, alt: 0.0 },
        { lng: 130, lat: 35, alt: 0.0 }, { lng: 125, lat: 40, alt: 0.0 }],
      style: {
        color: 'rgba(255,0,255,0.5)'
      }
    }
  },
  circle: {
    layerId,
    id: MapInstance.Util.uuid(),
    options: {
      geometry: { lng: 115, lat: 0, alt: 0.0 },
      style: {
        radius: 1500000,
        outline: true,
        outlineStyle: {
          materialType: MapInstance.MATERIAL_TYPE.Color, //材质是纯色
          materialOptions: {
            color: 'green'
          }
        }
      }
    }
  },
  rect: {
    layerId,
    id: MapInstance.Util.uuid(),
    options: {
      geometry: [{ lng: 115, lat: 25 }, { lng: 120, lat: 15 }],
      style: {
        color: 'orange',
        outlineStyle: {
          materialType: MapInstance.MATERIAL_TYPE.PolylineDash, // 材质是虚线
          materialOptions: {
            color: 'green', // 实线色
            gapColor: 'rgba(255,255,255,0)' // 间隔颜色
          }
        }
      }
    }
  },
  ellipse: {
    layerId,
    id: MapInstance.Util.uuid(),
    options: {
      geometry: { lng: 95, lat: 0 },
      style: {
        semiMajorAxis: 500000,
        semiMinorAxis: 350000
      }
    }
  },
  arch: {
    layerId,
    id: MapInstance.Util.uuid(),
    options: {
      geometry: { lng: 85, lat: 30 },
      style: {
        startAngle: 0,
        endAngle: 60,
        radius: 1500000
      }
    }
  },
  sector: {
    layerId,
    id: MapInstance.Util.uuid(),
    options: {
      geometry: { lng: 95, lat: 30 },
      style: {
        startAngle: 0,
        endAngle: 60,
        radius: 1500000
      }
    }
  },
  dot_symbol: {
    layerId,
    id: MapInstance.Util.uuid(),
    options: {
      geometry: { lng: 95, lat: 30 },
      style: {
        image: './JBResource/JB/100/100.svg' // 点军标所在的图片位置 libId/codeId
      }
    }
  }
}

export default {
  name: 'Control',
  data() {
    return {}
  },
  methods: {
    addOverlay(overlayType) {
      const { layerId, id, options } = overlayDict[overlayType]
      MapInstance.addOverlay(layerId, id, overlayType, options)
    },
    changeOverlay(overlayType) {
      // 假设修改图元的颜色
      const { id } = overlayDict[overlayType]
      MapInstance.setOverlay(id, {
        style: {
          color: 'green'
        }
      })
    },
    getOverlay(overlayType) {
      // 打印图元的信息
      const { id } = overlayDict[overlayType]
      console.log(MapInstance.getOverlay(id))
    },
    removeOverlay(overlayType) {
      // 删除图元，根据图元的唯一Id
      const { id } = overlayDict[overlayType]
      MapInstance.removeOverlay(id)
    },
    // 绘制图元
    drawOverlay(overlayType) {
      MapInstance.drawOverlay(layerId, overlayType, {
        callback: (o) => {
          console.log(o)
          MapInstance.setOverlay(o, {
            style: {
              outline: true,
              outlineStyle: {
                materialType: MapInstance.MATERIAL_TYPE.Color, //材质是纯色
                materialOptions: {
                  color: 'green'
                }
              }
            }
          })
        }
      })
    },
    clear() {
      MapInstance.clearOverlays()
    },
    exportScene() {
      console.log(MapInstance.exportScene())
    },
    importScene() {
      MapInstance.loadScene()
    },
    /**
     * 绑定全局点击事件，点击高亮
     */
    bindGlobalClickEvent() {
      MapInstance.bindEvent('globalClick', {
        targetType: MapInstance.EVENT_RANGE.GLOBAL,
        eventType: MapInstance.EVENT_TYPE.CLICK,
        callback: (e) => {
          if(e.overlay){
            MapInstance.setOverlay(e.overlay.bid, {
              style: {
                color: 'red'
              }
            })
          }
        }
      })
    },
    /**
     * 取消绑定全局点击事件
     */
    unbindGlobalClickEvent() {
      MapInstance.unbindEvent('globalClick')
    },
  },
  mounted() {
    /**
     * 添加图元图层
     */
    MapInstance.addLayer(layerId, {
      type: MapInstance.LAYER_TYPE.GRAPHIC
    })
  }
}
</script>

<style scoped lang='scss'>
.control-box {
  display: flex;
  position: absolute;
  width: 50%;
  height: 150px;
  top: 10px;
  z-index: 9999;
  color: #fff;
}

.click-btn {
  margin: 5px;
  background: #3a8ee6;
  height: 25px;
  cursor: pointer;
}
</style>
